<template>
  <div class='icons'>
    <router-link to="/myApplication"
                 tag="div">
      <div class='icon'
           v-for='item of list'
           :key='item.id'>
        <div class='icon-img'>
          <img class='icon-img-content'
               :src='item.imgUrl'>
        </div>
        <p class='icon-desc'>{{item.desc}}</p>
      </div>
    </router-link>
    <div class="clear"></div>
  </div>
</template>

<script>

export default {
  name: 'Icons',
  props: {
  },
  data () {
    return {
      swiperOption: {
        autoPlay: false
      },
      list: [{
        'id': '0001',
        'imgUrl': 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',
        'desc': '我的任务'
      }, {
        'id': '0002',
        'imgUrl': 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',
        'desc': '我的申请'
      }, {
        'id': '0003',
        'imgUrl': 'http://img1.qunarzz.com/piao/fusion/1710/a6/83f636bd75ae6302.png',
        'desc': '我的审批'
      }, {
        'id': '0004',
        'imgUrl': 'http://img1.qunarzz.com/piao/fusion/1611/35/2640cab202c41b02.png',
        'desc': '任务调度'
      }]
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.icons >>> .swiper-container
  height: 0
  padding-bottom: 50%
.icons
  margin-top: 0.1rem
  background: #fff
  .icon
    position: relative
    overflow: hidden
    float: left
    width: 25%
    height: 0
    padding-bottom: 25%
    .icon-img
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0.44rem
      box-sizing: border-box
      padding: 0.1rem
      .icon-img-content
        display: block
        margin: 0 auto
        height: 100%
    .icon-desc
      position: absolute
      left: 0
      right: 0
      bottom: 0
      height: 0.44rem
      line-height: 0.44rem
      text-align: center
      color: $darkTextColor
</style>
